<template lang="pug">
  el-dialog.welfare-record(
    width="40%",
    title="红包记录",
    :visible.sync="showModal",
    :before-close="beforeCloseHandler")
    h3.tac 领取记录
    ul.record-list
      li.record-item(v-for="item in getData")
        .icon
          img(:src="baseUrl + item.logo")
        .title.omit {{item.title}}
        .money ￥ {{item.money}}
        .time {{item.addtime | formatData}}

    span.dialog-footer(slot="footer")
      Pagination(:count='getDataLength', :currentpage='pageIndex', @handlePageChange='handlePageChange')
      el-button(size="small", @click="closeModal") 取 消
</template>

<script>
import modalMixin from '@/mixins/modal'
import Pagination from '@/components/Pagination'
import { mapGetters } from 'vuex'
export default {
  name: 'welfareHistoryModal',
  mixins: [modalMixin],
  data() {
    return {
      baseUrl: $globalconfig.URLS.API,
      recordData: null,
      pageIndex: 1
    }
  },
  mounted() {
    this.$vgo.on('welfare:history', () => {
      this.showRecord()
      this.openModal()
    })
  },
  computed: {
    ...mapGetters(['welfareHistory']),
    getData() {
      if(this.welfareHistory) {
        return this.welfareHistory.list
      }
    },
    getDataLength() {
      if(this.welfareHistory) {
        return this.welfareHistory.count
      }
    }
  },
  methods: {
    showRecord() {
      this.$store.dispatch('fetchWelfareHistory', [1, 10])
    },
    handlePageChange(val) {
      this.pageIndex = val
      this.$store.dispatch('fetchWelfareHistory', [val, 10])
    }
  },
  filters: {
    formatData: function (value) {
      if (!value) return ''
      var d = value.split('T')

      var str = `${d[0]} ${d[1].substr(0, 8)}`
      return str
    }
  },
  components: {
    Pagination
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/color.styl'
.welfare-record
  .el-dialog__body
    padding-top: 10px
    height: 475px
    overflow-y: auto
  h3
    font-size: 18px
    color: $black
    padding: 10px 0
    border-bottom: 1px solid $gray-light
  .record-list
    .record-item
      display: flex
      color: $black-light
      padding: 5px 0
      border-bottom: 1px solid #ddd
      &:last-child
        border-bottom: none
      & > div
        flex: 1
        line-height: 32px
      .icon
        flex: 0 0 32px
        width: 32px
        height: 32px
        img
          width: 100%
          height: 100%

      .title, .money
        padding-left: 20px
  .page-container
    position: absolute
    left: 0
    bottom: 17px
</style>
